var clickId=null;
var imgId=null;
//关闭裁剪框
function closeTailor() {
    $(".tailoring-container").toggle();
}
var loadingLayer=null;
function putb64(picBase,id){
    loadingLayer =layer.msg('图片上传中，请稍后', {
        icon: 16,
        shade: [0.8, '#393D49']
    });
    var qitoken="";
    $.ajax({
        url: '../upload/getToken',/*base64上传获取七牛token*/
        type: 'post',
        async: false,
        dataType: "json",
        success: function (data) {
            qitoken=data.token;
        }, error: function () {
            top.layer.msg("系统异常！", {icon: 2});
        }
    });

    //七牛云官方文档方法
    /*picUrl用来存储返回来的url*/
    var picUrl;
    /*把头部的data:image/png;base64,去掉。（注意：base64后面的逗号也去掉）*/
    picBase=picBase.substring(22);
    /*通过base64编码字符流计算文件流大小函数*/
    function fileSize(str) {
        var fileSize;
        if(str.indexOf('=')>0)  {
            var indexOf=str.indexOf('=');
            str=str.substring(0,indexOf);//把末尾的’=‘号去掉
        }
        fileSize=parseInt(str.length-(str.length/8)*2);
        return fileSize;
    }
    /*把字符串转换成json*/
    function strToJson(str) {
        var json = eval('(' + str + ')');
        return json;
    }
    //http://upload-z2.qiniu.com/putb64/ 只适用于七牛云华南空间 因为我的是七牛云华南空间，如果不是华南空间需要根据七牛云文档进行更改
    var url = "http://up.qiniu.com/putb64/"+fileSize(picBase);
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange=function(){
        if (xhr.readyState==4){
            var keyText=xhr.responseText;
            /*返回的key是字符串，需要装换成json*/
            keyText=strToJson(keyText);
            /* http://image.haoqiure.com/ 是我的七牛云空间网址，keyText.key 是返回的图片文件名*/
            picUrl="http://lianmengyouxixcx.suchengkeji.cn/"+keyText.key;
            // console.log(picUrl);
            // $("#imgShowurl").val(picUrl)   //将图片链接显示在输入框去
            layer.close(loadingLayer);
            $("."+clickId).show();
            $("."+clickId).attr("src",picUrl);
            $("."+clickId).val(picUrl);
        }
    }

    xhr.open("POST", url, true);
    xhr.setRequestHeader("Content-Type", "application/octet-stream");
    xhr.setRequestHeader("Authorization", "UpToken "+qitoken+"");
    xhr.send(picBase);
}
$('.url').load(function(){
    layer.close(loadingLayer);
});
layui.use(['form', 'layer', 'layedit', 'laydate', 'upload'], function () {
    var form = layui.form
    layer = parent.layer === undefined ? layui.layer : top.layer,
        laypage = layui.laypage,
        upload = layui.upload,
        layedit = layui.layedit,
        laydate = layui.laydate,
        $ = layui.jquery;
    form.on('select(gameCate)', function (data) {
        if (data.value == 2 || data.value == 3) {
            $("#appIdDiv").show();
            $("#erweimaDiv").hide();
        } else if (data.value == 1) {
            $("#appIdDiv").hide();
            $("#erweimaDiv").show();
        } else {
            $("#appIdDiv").hide();
            $("#erweimaDiv").hide();
        }
    });
    //执行实例
    var uploadInst2 = upload.render({
        elem: '#uploadCode' //绑定元素
        , method: 'post'
        , url: '../upload/uploadOneImg' //上传接口
        , done: function (res) {
            var index = layer.load(1); //换了种风格
            //上传完毕回调
            if (res.code == 0) {
                layer.close(index);
                top.layer.msg("上传成功", {icon: 6});
                $(".appId").show();
                $(".appId").attr("src", res.data.src);
                $(".appId").val(res.data.src);

            } else {
                layer.close(index);
                top.layer.msg("上传失败", {icon: 5});
            }
        }
        , error: function () {
            //请求异常回调
            top.layer.msg("系统繁忙,请稍后再试", {icon: 5});
        }
    });
    //执行实例
    var uploadInst3 = upload.render({
        elem: '#uoloadLogo' //绑定元素
        , method: 'post'
        ,auto: false,
        choose: function(obj){
            clickId="gameLogo";
            imgId="tailoringImg";
            $('#showImgDiv').show();
            $('#showImgDiv2').hide();
            $(".tailoring-container").css('display','block');
            //将每次选择的文件追加到文件队列
            var files = obj.pushFile();

            //预读本地文件，如果是多文件，则会遍历。(不支持ie8/9)
            obj.preview(function(index, file, result){
                var reader = new FileReader();
                reader.onload = function (evt) {
                    var replaceSrc = evt.target.result;
                    //更换cropper的图片
                    $('#tailoringImg').cropper('replace', replaceSrc,false);//默认false，适应高度，不失真
                }
                reader.readAsDataURL(file);
            });
        }
        , done: function (res) {
            var index = layer.load(1); //换了种风格
            //上传完毕回调
            if (res.code == 0) {
                layer.close(index);
                top.layer.msg("上传成功", {icon: 6});
                $(".gameLogo").show();
                $(".gameLogo").attr("src", res.data.src);
                $(".gameLogo").val(res.data.src);

            } else {
                layer.close(index);
                top.layer.msg("上传失败", {icon: 5});
            }
        }
        , error: function () {
            //请求异常回调
            top.layer.msg("系统繁忙,请稍后再试", {icon: 5});
        }
    });
    //执行实例
    var uploadInst4 = upload.render({
        elem: '#uploadBigLogo' //绑定元素
        , method: 'post'
        ,auto: false
        ,choose: function(obj){
            $('#showImgDiv').hide();
            $('#showImgDiv2').show();
            imgId="tailoringImg2";
            clickId="gameBigLogo";
            $(".tailoring-container").css('display','block');
            //将每次选择的文件追加到文件队列
            var files = obj.pushFile();
            //预读本地文件，如果是多文件，则会遍历。(不支持ie8/9)
            obj.preview(function(index, file, result){
                var reader = new FileReader();
                reader.onload = function (evt) {
                    var replaceSrc = evt.target.result;
                    //更换cropper的图片
                    $('#tailoringImg2').cropper('replace', replaceSrc,false);//默认false，适应高度，不失真
                }
                reader.readAsDataURL(file);
            });
        } , done: function (res) {
            var index = layer.load(1); //换了种风格
            //上传完毕回调
            if (res.code == 0) {
                layer.close(index);
                top.layer.msg("上传成功", {icon: 6});
                $(".gameBigLogo").show();
                $(".gameBigLogo").attr("src", res.data.src);
                $(".gameBigLogo").val(res.data.src);

            } else {
                layer.close(index);
                top.layer.msg("上传失败", {icon: 5});
            }
        }
        , error: function () {
            //请求异常回调
            top.layer.msg("系统繁忙,请稍后再试", {icon: 5});
        }
    });



    //cropper图片裁剪
    $('#tailoringImg').cropper({
        preview: '.previewImg',//预览视图
        guides: false,  //裁剪框的虚线(九宫格)
        autoCropArea: 1,  //0-1之间的数值，定义自动剪裁区域的大小，默认0.8
        movable: false, //是否允许移动图片
        dragCrop: true,  //是否允许移除当前的剪裁框，并通过拖动来新建一个剪裁框区域
        movable: true,  //是否允许移动剪裁框
        resizable: true,  //是否允许改变裁剪框的大小
        zoomable: false,  //是否允许缩放图片大小
        minCropBoxWidth:118,
        minCropBoxHeight:118,
        mouseWheelZoom: false,  //是否允许通过鼠标滚轮来缩放图片
        touchDragZoom: true,  //是否允许通过触摸移动来缩放图片
        rotatable: true,  //是否允许旋转图片
        crop: function(e) {
            // 输出结果数据裁剪图像。
        }
    });
    //cropper图片裁剪
    $('#tailoringImg2').cropper({
        preview: '.previewImg',//预览视图
        guides: false,  //裁剪框的虚线(九宫格)
        autoCropArea: 1,  //0-1之间的数值，定义自动剪裁区域的大小，默认0.8
        movable: false, //是否允许移动图片
        dragCrop: true,  //是否允许移除当前的剪裁框，并通过拖动来新建一个剪裁框区域
        movable: true,  //是否允许移动剪裁框
        resizable: true,  //是否允许改变裁剪框的大小
        zoomable: false,  //是否允许缩放图片大小
        minCropBoxWidth:348,
        minCropBoxHeight:186,
        mouseWheelZoom: false,  //是否允许通过鼠标滚轮来缩放图片
        touchDragZoom: true,  //是否允许通过触摸移动来缩放图片
        rotatable: true,  //是否允许旋转图片
        crop: function(e) {
            // 输出结果数据裁剪图像。
        }
    });


    //旋转
    $(".cropper-rotate-btn").on("click",function () {
        $('#'+imgId).cropper("rotate", 45);
    });
    //复位
    $(".cropper-reset-btn").on("click",function () {
        $('#'+imgId).cropper("reset");
    });
    //换向
    var flagX = true;
    $(".cropper-scaleX-btn").on("click",function () {
        if(flagX){
            $('#'+imgId).cropper("scaleX", -1);
            flagX = false;
        }else{
            $('#'+imgId).cropper("scaleX", 1);
            flagX = true;
        }
        flagX != flagX;
    });

    //裁剪后的处理
    $("#sureCut").on("click",function () {
        if ($("#"+imgId).attr("src") == null ){
            return false;
        }else{
            var cas = $('#'+imgId).cropper('getCroppedCanvas');//获取被裁剪后的canvas
            var base64url = cas.toDataURL('image/png'); //转换为base64地址形式
            codeBase64Url=base64url;
            putb64(base64url);
            closeTailor();
        }
    });
    form.on("submit(sub)", function (data) {
        var appId="";
        if(data.field.cateId==1){
            appId=$(".appId").attr("src");
        }else{
            appId=$(".appId").val();
        }
        var count=data.field.gameCount;
        if (!(/(^[1-9]\d*$)/.test(count))) {
            top.layer.msg("在玩人数请输入正整数", {icon: 6});
            return false;
        }
        //弹出loading
        var index = top.layer.msg('数据提交中，请稍候', {icon: 16, time: false, shade: 0.8});
        $.ajax({
            url: '../info/saveInfo',
            type: 'post',
            async: false,
            data: {
                id: data.field.id,
                gameName: data.field.gameName,
                gameProvider: data.field.gameProvider,
                count: count,
                cateId: data.field.cateId,
                cateInfo: appId,
                typeId: data.field.gameType,
                pagePath:data.field.pagePath,
                gameLogo: $(".gameLogo").attr("src"),
                gameBigLogo: $(".gameBigLogo").attr("src"),
                state:1
            },
            dataType: "json",
            success: function (res) {
                if (res.code == 200) {
                    top.layer.close(index);
                    top.layer.msg("操作成功！", {icon: 6});
                    parent.location.reload();
                } else {
                    top.layer.msg(res.msg, {icon: 5});
                }
            }, error: function () {
                top.layer.msg("系统异常！", {icon: 6});
                top.layer.close(index);
            }
        });
        return false;
    });

});